<template>
	<view class="page">
		<public-module></public-module>
		<f-navbar  fontColor="#fff"  :scrollTop="scrollTop" :isShowTransparentTitle="false" navbarType='5'></f-navbar>
		
		<view class="section">
			<view class="flex-col section_2">
			<view class="flex-col section_8">
				<!-- 奖品列表 -->
				<view class="giftlist giftlist-mar-top" v-if="itemList && itemList.length!=0">
					<view class="gift-item" v-for="(item, itemindex) in itemList" :key="itemindex" @click="onJump('itemdetail?id='+item.id)">
						<view class="content">
							<image :src="item.tempimg" mode="aspectFill" class="img" />
						</view>
						<view class="title">
							<view class="title-body title-body-item">
								<text class="name">{{item.title}}</text>
								<text class="subname">{{(item.desc && item.desc.length)>50?item.desc.substring(0,50)+'...':item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-empty mode="order" text="暂无服务项目" v-else></u-empty>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import base from '@/config/baseUrl';
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	import {
		itemList
	} from '@/config/api.js';
	// #ifdef MP-WEIXIN
	import {
		title
	} from 'process';
	// #endif
	export default {
		components:{
		    fNavbar
		},
		data() {
			return {
				id: "", //项目id
				itemList: null
			}
		},
		onLoad(option) {
			this.getItem();
		},

		methods: {
			onJump(url) {
				uni.navigateTo({
					url: url
				})
			},
			//项目列表
			getItem() {
				var userInfo = uni.getStorageSync('userInfo')
				this.store_id = userInfo.store_id
				if (this.store_id == 0) return
				let httpData = {
					store_id: this.store_id,//列表
				}
				
				itemList({
					params: httpData
				}).then((res) => {
					if (res && res.data && res.data.article.length != 0) {
						this.itemList = res.data.article;
					}
				}).catch((err) => {
					console.log(err, 'catch')
				})				
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		// background: $uni-newcolor-primary;		
	}
	.page {
		padding-bottom: 50rpx;

		.section {
			// background-color: #ffffff;

			.section_2 {
				margin: 140rpx 20rpx 0;
				padding: 0 15rpx 15rpx;
				background-color: #f60011;
				border-radius: 20rpx;
				position: relative;

				.section_3 {
					padding: 36.08rpx 0 100rpx;
					background-color: rgb(255, 246, 0);
					border-radius: 20rpx;
				}
			}
		}

		.section_8 {
			display: flex;
			background-color: #f2f2f2;
			border-radius: 20rpx;
			padding-bottom: 20rpx;
			overflow: hidden;
			margin-top: 15rpx;

			&.no-mar-t {
				margin-top: -80rpx !important;
			}
		}

		// banner
		.banner {
			width: 100%;
		}

		// 导航菜单
		.tabbar-hei {
			display: flex;
			height: 150rpx;
		}

		// 统计
		.tongji {
			width: 100%;
			position: relative;
			top: -40rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.tongji-bg {
				width: 100%;
			}

			.tongji-body {
				position: absolute;
				left: 0;
				top: 20%;
				display: flex;
				width: 100%;
				height: 60%;
				justify-content: center;

				.tongji-item {
					display: flex;
					align-items: center;
					padding: 0 15rpx;
					color: #ffffff;
					font-size: 24rpx;
					text-shadow: 4px 4px 4px rgba(126, 18, 5, 0.4);

					&:nth-child(2) {
						border-left: 1px solid rgba(255, 255, 255, 0.3);
						border-right: 1px solid rgba(255, 255, 255, 0.3);
					}
				}
			}
		}

		.tabbar {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			background-color: #f60011;

			.tabbar-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33.333333%;
				color: #fff;
				padding: 20rpx 20rpx 15rpx;
				position: relative;
				text-align: center;

				.icon {
					width: 60rpx;
					height: 60rpx;

					&.icon-ylt {
						width: 70rpx;
						height: 70rpx;
					}
				}

				text {
					font-size: 24rpx;
					line-height: 1.8;
				}

				&.tabbar-item-mid {
					margin-top: -130rpx;

					.icon {
						width: 180rpx;
						height: 180rpx;
					}
				}
			}
		}

		// 礼品列表
		.giftlist {
			display: flex;
			flex-direction: column;

			.gift-item {
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				background-color: #ffffff;

				.title {
					display: flex;

					.title-icon {
						display: flex;
						background: url('/static/new/title_gift.png') no-repeat center;
						background-size: 100%;
						width: 40rpx;
						height: 40rpx;
					}

					.title-body {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;

						&.title-body-item {
							.name {
								font-size: 34rpx !important;
								margin-top: 10rpx;
								line-height: 1.8;
								&.title-ac{
									text-align: center;
									font-size: 36rpx!important;
									line-height: 3;
								}
							}

							.subname {
								font-size: 24rpx;
								color: #777777;
								line-height: 1.6 !important;
							}
						}

						.name {
							font-size: 36rpx;
							font-size: bold;
							font-weight: bold;
							color: #353434;
						}

						.subname {
							font-size: 22rpx;
							color: #777777;
							line-height: 2;
						}
					}
				}

				.content {
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;

					.img {
						display: flex;
						width: 100%;
						height: 450rpx;
						border-radius: 10rpx;
					}

					.content-body {
						display: flex;
						width: 100%;
						flex-direction: column;
						padding-left: 15rpx;
						padding-right: 15rpx;

						.btn {
							display: flex;
							width: 120rpx;
							height: 120rpx;
							margin: 0 auto;
						}

						.zl-list {
							display: flex;
							flex-direction: column;

							.zl-list-tt {
								display: flex;
								justify-content: space-between;
								line-height: 2;
								border-bottom: 1px solid #ddd;
								font-size: 22rpx;
							}

							.friendlist {
								display: flex;
								flex-direction: column;

								.friendlist-item {
									display: flex;
									align-items: center;
									justify-content: space-between;
									padding-bottom: 10rpx;
									font-size: 26rpx;

									.img {
										border-radius: 70rpx;
										width: 70rpx;
										height: 70rpx;
									}

									.name {
										padding: 0 10rpx;
									}

									.tel {
										float: right;
									}
								}
							}
						}
					}
				}

				.jindu {
					display: flex;
					justify-content: space-between;
					margin-top: 50rpx;

					.tip {
						width: 150rpx;
						height: 50rpx;
					}

					.jindu-body {
						flex: 1;
						display: flex;
						height: 40rpx;
						align-items: center;
						position: relative;
						top: 8rpx;

						.jd1 {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							width: 100%;
							height: 40rpx;
							box-shadow: 0 0 5px 3px rgba(204, 18, 9, 0.5) inset;
							border-radius: 40rpx;
							overflow: hidden;

							.baifenbi {
								position: relative;
								left: 0;
								top: 0;
								display: block;
								width: auto;
								height: 40rpx;
								background: url('/static/new/jindu_line_hover.png') repeat-x center;
								background-size: auto 100%;
							}
						}

						.jd2 {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							width: 100%;
							height: 40rpx;
							border-radius: 40rpx;
							box-shadow: 0 0 3px 1px rgba(204, 18, 9, 0.3);

							.pos {
								position: relative;
								left: 0;
								top: -10rpx;
								width: 60rpx;
								height: 60rpx;
							}

							.val {
								position: relative;
								left: 0;
								top: -110rpx;
								font-size: 34rpx;
								font-weight: bold;
								color: #d92617;
							}
						}

					}
				}

			}
		}

		.djs {
			display: flex;
			margin: auto;
			width: 45%;
			height: 90rpx;
		}

		// 助力btn
		.zhulibtn {
			width: 180rpx;
			height: 180rpx;
			margin-top: 30rpx;
		}

		.endtxt {
			line-height: 2;
		}

		//标题
		.modtitle {
			padding: 0 20rpx;
			background-color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #f2f2f2;

			&.mar-t {
				margin-top: 40rpx;
			}

			.name {
				border-left: 8rpx solid #f60011;
				padding-left: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #353434;
			}
		}

		// 返回首页
		.backhome {
			position: fixed;
			left: 30rpx;
			top: 70rpx;
			display: flex;
			width: 70rpx;
			height: 70rpx;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 70rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}
</style>